<template>
  <div class="general-bg">
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="综合概况" name="first">
          <div class="echarts-box">
            <div class="line" id="ehcats-line"></div>
            <div class="tables">
              <table id="tab" align="center" width="900px">
                <thead style="background: #1a202c; color: #fff">
                  <tr>
                    <th>时间</th>
                    <th>网络零售额(万元)</th>
                    <th>同比(%)</th>
                  </tr>
                </thead>
                <tbody style="background: #1a202c; color: #fff">
                  <tr v-for="item in table" :key="item.id">
                    <td>{{ item.time }}</td>
                    <td>{{ item.sale }}</td>
                    <td>{{ item.tb }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <!-- tab 2 -->
        <el-tab-pane label="商品类型" name="second">
          <div class="tabs-box">
            <div class="doubleline-box" id="doubleline"></div>
            <div class="tables">
              <table id="tab" align="center" width="1200px">
                <thead style="background: #1a202c; color: #fff">
                  <tr>
                    <th>时间</th>
                    <th>网络零售额(万元)</th>
                    <th>非网络零售额(%)</th>
                    <th>实物同比</th>
                    <th>非实物同比</th>
                    <th>占比</th>
                    <th>非实物占比</th>
                  </tr>
                </thead>
                <tbody style="background: #1a202c; color: #fff">
                  <tr v-for="item in table" :key="item.id">
                    <td>{{ item.time }}</td>
                    <td>{{ item.sale }}</td>
                    <td>{{ item.tb }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="交易平台" name="third">
          <!-- 筛选 -->
          <!-- 图表 -->
          <div class="echarts-box">
            <div class="line" id="ehcatsline"></div>
            <div class="tables">
              <table id="tab" align="center" width="900px">
                <thead style="background: #1a202c; color: #fff">
                  <tr>
                    <th>时间</th>
                    <th>网络零售额(万元)</th>
                    <th>同比(%)</th>
                  </tr>
                </thead>
                <tbody style="background: #1a202c; color: #fff">
                  <tr v-for="item in table" :key="item.id">
                    <td>{{ item.time }}</td>
                    <td>{{ item.sale }}</td>
                    <td>{{ item.tb }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品大类" name="fourth">
          <div class="shop-con">
            <div class="shopcharts" id="fullwidthecharts"></div>
            <div class="table">
              <table align="center" width="800px">
                <thead style="background: #1a202c; color: #fff">
                  <tr>
                    <th>时间</th>
                    <th>网络零售额(万元)</th>
                    <th>同比(%)</th>
                  </tr>
                </thead>
                <tbody style="background: #1a202c; color: #fff">
                  <tr v-for="item in table" :key="item.id">
                    <td>{{ item.time }}</td>
                    <td>{{ item.sale }}</td>
                    <td>{{ item.tb }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="echarts-box">
              <div class="line" id="ehcatslines"></div>
              <div class="">
                <table align="center" width="800px">
                  <thead style="background: #1a202c; color: #fff">
                    <tr>
                      <th>时间</th>
                      <th>网络零售额(万元)</th>
                      <th>同比(%)</th>
                    </tr>
                  </thead>
                  <tbody style="background: #1a202c; color: #fff">
                    <tr v-for="item in table" :key="item.id">
                      <td>{{ item.time }}</td>
                      <td>{{ item.sale }}</td>
                      <td>{{ item.tb }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="非实物大类" name="five">
          <div class="five-fl">
            <div class="echarts">
              <div class="cont" id="con"></div>
            </div>
            <div class="tables">
              <table align="center" width="90%">
                <thead style="background: #1a202c; color: #fff">
                  <tr>
                    <th>时间</th>
                    <th>行业</th>
                    <th>网络零售额(万元)</th>
                    <th>同比(%)</th>
                    <th>占比(%)</th>
                  </tr>
                </thead>
                <tbody style="background: #1a202c; color: #fff">
                  <tr v-for="item in table" :key="item.id">
                    <td>{{ item.time }}</td>
                    <td>{{ item.hang }}</td>
                    <td>{{ item.sale }}</td>
                    <td>{{ item.tb }}</td>
                    <td>{{ item.zz }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="排行榜" name="six">
          <div class="tables">
            <table align="center" width="1300px">
              <thead style="background: #1a202c; color: #fff">
                <tr>
                  <th>时间</th>
                  <th>网络零售额(万元)</th>
                  <th>同比(%)</th>
                </tr>
              </thead>
              <tbody style="background: #1a202c; color: #fff">
                <tr v-for="item in table" :key="item.id">
                  <td>{{ item.time }}</td>
                  <td>{{ item.sale }}</td>
                  <td>{{ item.tb }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: "first",
      table: [
        {
          time: "2022-1",
          hang: "娱乐",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-2",
          hang: "餐饮",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-3",
          hang: "住宿",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-4",
          hang: "游玩",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
      ],
    };
  },

  mounted() {
    this.draws();
    this.drawechart();
    this.draw();
    this.drawdoubleline();
    this.drawed4();
    this.drawfullwidth();
  },

  methods: {
    drawfullwidth() {
      var chartDom = document.getElementById("fullwidthecharts");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "vertical",
          x: "center",
          y: "top",
          backgroundColor: "transparent",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:万元",
          nameLocation: "end",
          nameGap: 35,
        },
        series: [
          {
            name: "网络零售额",
            itemStyle: {
              barBorderRadius: [2, 2, 2, 2], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //右下左上 四个方位。也就是从右边开始顺时针方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                1,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#3F95CE ",
                  },
                  {
                    offset: 1,
                    color: "#1DE7E7 ",
                  },
                ]
              ),
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawechart() {
      var chartDom = document.getElementById("con");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "vertical",
          x: "center",
          y: "top",
          backgroundColor: "transparent",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:万元",
          nameLocation: "end",
          nameGap: 35,
        },
        series: [
          {
            name: "网络零售额",
            itemStyle: {
              barBorderRadius: [2, 2, 2, 2], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //右下左上 四个方位。也就是从右边开始顺时针方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                1,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#3F95CE ",
                  },
                  {
                    offset: 1,
                    color: "#1DE7E7 ",
                  },
                ]
              ),
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawed4() {
      var chartDom = document.getElementById("ehcatslines");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: ["Evaporation", "Temperature"],
        },
        xAxis: [
          {
            type: "value",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "category",

            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "实物占比",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },

            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                1,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1EE7E7 ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#1EE7E7 ",
                  },
                ]
              ),
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    draws() {
      var chartDom = document.getElementById("ehcatsline");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: ["Evaporation", "Temperature"],
        },
        xAxis: [
          {
            type: "value",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "category",

            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "实物占比",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },

            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                1,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1EE7E7 ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#1EE7E7 ",
                  },
                ]
              ),
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    draw() {
      var chartDom = document.getElementById("ehcats-line");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: ["Evaporation", "Temperature"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Precipitation",

            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "Temperature",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "实物占比",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                1,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1EE7E7 ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#1EE7E7 ",
                  },
                ]
              ),
            },
          },

          {
            name: "非实物占比",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
            lineStyle: {
              color: "#ED5731 ",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    drawdoubleline() {
      var chartDom = document.getElementById("doubleline");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "xxx",
          textStyle: {
            //---主标题内容样式
            color: "#fff",
          },
          left: "center", //居中
          padding: [30, 0],
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        grid: {},
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            splitLine: { show: true }, //去除网格线
            splitArea: { show: true }, //保留网格区域
            axisTick: { show: true }, //隐藏刻度线
            axisLine: {
              lineStyle: {
                color: "#fff", //坐标值得具体的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FFFFFF",
              },
            }, //y轴竖线
            axisTick: { show: true }, //y轴刻度
            splitLine: { show: true }, //y轴横线
            type: "value",
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [2, 1, 1, 1, 1, 1, 2, 1, 3],
            barGap: "0%", //中间不间隔
            // barWidth: 80, //设置宽度
            lineStyle: {
              color: "#1EE7E7", //柱状图颜色
            },
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                0,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1f6a70  ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#1EE7E7 ",
                  },
                ]
              ),
            },
          },
          {
            type: "bar",
            data: [5, 3, 4, 2, 1, 2, 1, 2, 3, 8, 9, 1],
            barGap: "0%",
            itemStyle: {
              color: "#1890FF", //柱状图颜色
            },
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                0,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1c4c7d  ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#238bf1 ",
                  },
                ]
              ),
            },
          },
          {
            type: "line",
            xAxisIndex: 1, //表示使用xAxis下标为1的刻度线,如果超出xAxis的长度会报错
            data: [2, 1, 1, 1, 1, 1, 2, 1, 3],
            lineStyle: {
              color: "yellow",
            },
            symbol: "circle",
          },
          {
            type: "line",
            xAxisIndex: 1,
            data: [5, 3, 4, 2, 1, 2, 1, 2, 3, 8, 9, 1],
            lineStyle: {
              color: "#ED5731 ",
            },
            symbol: "circle",
          },
        ],
      };
      //添加一个新的刻度线 实现折线在柱状图的中间显示
      option.xAxis[1] = {
        type: "value",
        max: option.xAxis[0].data.length,
        show: false,
      };
      option.series[2].data = option.series[2].data.map((x, i) => [
        0.25 + i,
        x,
      ]);
      option.series[3].data = option.series[3].data.map((x, i) => [
        0.75 + i,
        x,
      ]);
      //0.25和0.75表示两个折线图只需要向左向右偏移0.5即可实现居中（根据横坐标去计算）
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts {
  .cont {
    width: 700px;
    height: 600px;
    margin: auto;
  }
}
.shopcharts {
  padding: 20px 0;
  width: 100vw;
  height: 400px;
}

.general-bg {
  padding: 20px;
}
.echarts-box {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin: 20px;
  .line {
    flex: 1;
    width: 1000px;
    height: 600px;
  }
  .tables {
    flex: 1;
    margin-left: 70px;
  }
}
.doubleline-box {
  width: 1200px;
  height: 700px;
  margin: auto;
}
tr {
  text-align: center;
}
tr:nth-child(even) {
  background: #122843;
}
tr:nth-child(odd) {
  background: #181e30;
}
</style>
